<template>
  <div class="dashboard-container">
    <el-loading v-show="loading" class="loading-mask" spinner="el-icon-loading" background="rgba(255, 255, 255, 0.8)"></el-loading>
    
    <!-- 添加新的查看详情区块 -->
    <div v-show="editvisibale">
      <el-page-header title="返回" @back="back2" content="查看" style="line-height: 50px; border-radius: 5px; background-color: #ffffff;">
      </el-page-header>
      <editblock :row="row"></editblock>
    </div>

    <el-row v-show="basicvisible" :gutter="16">
      <!-- 搜索筛选区域 -->
      <el-form :inline="true" :model="searchForm" class="mb-4">
        <el-form-item label="专家姓名" class="custom-form-item">
          <el-input v-model="searchForm.expertName" placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="职称">
          <el-select v-model="searchForm.title" placeholder="请选择">
            <el-option
              v-for="item in titleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="专业">
          <el-cascader
            v-model="searchForm.primaryMajor"
            :options="majorOptions"
            placeholder="请选择"
            @change="handleMajorChange"
          />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="searchForm.gender" placeholder="请选择">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <span class="age-label">
            <el-input v-model="searchForm.ageStart" placeholder="起始" />
            <span class="mx-2">-</span>
            <el-input v-model="searchForm.ageEnd" placeholder="结束" />
            <span class="mx-2">周岁</span>
          </span>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="searchForm.auditStatus" placeholder="请选择">
            <el-option
              v-for="item in auditStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审核处室">
          <el-select v-model="searchForm.belong" placeholder="请选择">
            <el-option
              v-for="item in officeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="form-actions">
          <el-button class="primary-btn" @click="resetForm">清空</el-button>
          <el-button class="primary-btn" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 操作按钮区域 -->
      <div   v-if="role != 'lEADER'"  class="mb-4 button-container">
        <!-- <el-button class="custom-success-btn" @click="addExpert">新增</el-button> -->
        <el-button v-if="role != 'lEADER' && role != 'DEPT' && role != 'CENTER'" class="custom-danger-btn" @click="deleteSelected">删除</el-button>
        <el-button v-if="role != 'lEADER' && role != 'DEPT' && role != 'CENTER'" class="custom-primary-btn" @click="exportData">导出</el-button>
        <el-button  v-if="role != 'lEADER' &&  role != 'CENTER'" class="custom-info-btn" @click="audit">审核</el-button>
        <el-button class="custom-warning-btn" v-if="inbutton" @click="storage">入库</el-button>
      </div>
      <!-- 数据表格区域 -->
      <el-table :data="expertList" stripe border fit highlight-current-row ref="expertTable">
        <!-- <el-table-column type="index" label="序号" /> -->
        <el-table-column 
  align="center" 
  label="序号" 
  width="50"
>
  <template slot-scope="scope">
    {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
  </template>
</el-table-column>
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="专家姓名" />
        <el-table-column prop="auditStatus" label="审核状态">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.auditStatus)">{{ scope.row.auditStatus }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="belong" label="审核处室" />
        <el-table-column prop="gender" label="性别">
          <template slot-scope="scope">
             {{ scope.row.gender === '男' ? '男' : (scope.row.gender === '女' ? '女' : '未选择') }}
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="job" label="职位" />
        <el-table-column prop="primaryMajor" label="专业（主专业）">
          <template slot-scope="scope">
            {{ formatMajor(scope.row.primaryMajor) }}
          </template>
        </el-table-column>
        <el-table-column prop="education" label="学历">
          <template slot-scope="scope">
            {{ getEducationLabel(scope.row.education) }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="职称" />
        <el-table-column prop="workUnit" label="单位" />
        <!-- <el-table-column prop="updateTime" label="入库时间" /> -->
        <el-table-column  label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="goToDetail(scope.row)">查看</el-button>
            <!-- <el-button type="text" size="small" @click="editExpert(scope.row)">编辑</el-button> -->
            <!-- <el-button type="text" size="small" @click="output(scope.row)">出库</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div v-if="expertList.length === 0" class="empty-tip">
        <el-icon><circle-notch /></el-icon>
        <span>暂无符合条件的专家数据</span>
      </div>
      <!-- 分页组件 -->
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        :layout="layout"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
    
    <!-- 各种对话框 -->
    <!-- 编辑对话框 -->
    <!-- <el-dialog :visible.sync="editDialogVisible" title="编辑专家信息" width="60%">
      <el-form :model="editForm" :rules="editRules" ref="editFormRef" label-width="120px" class="aligned-form">
        <el-form-item label="专家姓名" prop="name">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="editForm.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="editForm.age" type="number" />
        </el-form-item>
        <el-form-item label="职位" prop="job">
          <el-input v-model="editForm.job" />
        </el-form-item>
        <el-form-item label="职称" prop="title">
          <el-select v-model="editForm.title" placeholder="请选择">
            <el-option
              v-for="item in titleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="primaryMajor">
          <el-cascader
            v-model="editForm.primaryMajor"
            :options="majorOptions"
            placeholder="请选择"
            change-on-select
          />
        </el-form-item>
        <el-form-item label="学历" prop="education">
          <el-select v-model="editForm.education" placeholder="请选择">
            <el-option
              v-for="item in educationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="单位" prop="workUnit">
          <el-input v-model="editForm.workUnit" />
        </el-form-item>
        <el-form-item label="审核状态" prop="auditStatus">
          <el-select v-model="editForm.auditStatus" placeholder="请选择">
            <el-option
              v-for="item in auditStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审核处室" prop="belong">
          <el-select v-model="editForm.belong" placeholder="请选择">
            <el-option
              v-for="item in officeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit">保存</el-button>
        </span>
      </template>
    </el-dialog> -->
    <!-- 新增对话框 -->
    <el-dialog :visible.sync="addDialogVisible" title="新增专家信息" width="60%">
      <el-form :model="addForm" :rules="addRules" ref="addFormRef" label-width="120px" class="aligned-form">
        <el-form-item label="专家姓名" prop="expertName">
          <el-input v-model="addForm.expertName" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="addForm.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="addForm.age" type="number" />
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-input v-model="addForm.position" />
        </el-form-item>
        <el-form-item label="职称" prop="title">
          <el-select v-model="addForm.title" placeholder="请选择">
            <el-option
              v-for="item in titleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="primaryMajor">
          <el-cascader
            v-model="addForm.primaryMajor"
            :options="majorOptions"
            placeholder="请选择"
            change-on-select
          />
        </el-form-item>
        <el-form-item label="学历" prop="education">
          <el-select v-model="addForm.education" placeholder="请选择">
            <el-option
              v-for="item in educationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input v-model="addForm.unit" />
        </el-form-item>
        <el-form-item label="审核状态" prop="auditStatus">
          <el-select v-model="addForm.auditStatus" placeholder="请选择">
            <el-option
              v-for="item in auditStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审核处室" prop="belong">
          <el-select v-model="addForm.belog" placeholder="请选择">
            <el-option
              v-for="item in officeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveAdd">保存</el-button>
        </span>
      </template>
   </el-dialog>
    <!-- 删除确认对话框 -->
    <el-dialog :visible.sync="deleteDialogVisible" title="确认删除" width="30%">
      <div class="delete-confirm-content">
        <p>确定要删除选中的专家吗？此操作不可恢复！</p>
        <p class="text-warning">选中了 {{ selectedRows.length }} 位专家</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确认删除</el-button>
      </div>
    </el-dialog>
    
    <!-- 入库对话框 -->
    <el-dialog 
      :visible.sync="storageDialogVisible" 
      title="专家入库" 
      width="70%" 
      :close-on-click-modal="false"
      class="storage-dialog"
    >
      <div class="storage-container">
        <div class="storage-header">
          <div class="selected-count">
            已选择 <span class="count-number">{{ selectedRows.length }}</span> 位专家
          </div>
          <div class="storage-status" v-if="storageStatus">
            <el-tag :type="getStorageStatusType">{{ storageStatus }}</el-tag>
          </div>
        </div>

        <div class="storage-content">
          <el-table
            :data="selectedRows"
            style="width: 100%"
            max-height="400"
          >
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="name" label="专家姓名"></el-table-column>
            <el-table-column prop="title" label="职称"></el-table-column>
            <el-table-column prop="primaryMajor" label="第一专业"></el-table-column>
            <el-table-column prop="auditStatus" label="当前状态">
              <template slot-scope="scope">
                <el-tag :type="getStatusType(scope.row.auditStatus)">
                  {{ scope.row.auditStatus }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="storageStatus" label="入库状态">
              <template slot-scope="scope">
                <span v-if="!scope.row.storageStatus">待入库</span>
                <el-tag v-else :type="scope.row.storageStatus.type">
                  {{ scope.row.storageStatus.text }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>

          <div class="storage-progress" v-if="isStoraging">
            <el-progress 
              :percentage="storageProgress" 
              :status="storageProgress === 100 ? 'success' : ''"
            ></el-progress>
            <div class="progress-text">正在入库中，请稍候...</div>
          </div>

          <div class="storage-result" v-if="storageComplete">
            <div class="result-summary">
              <div class="success-count">
                <i class="el-icon-success"></i>
                成功入库：{{ successCount }} 位
              </div>
              <div class="fail-count" v-if="failCount > 0">
                <i class="el-icon-warning"></i>
                入库失败：{{ failCount }} 位
              </div>
            </div>
            <div class="fail-list" v-if="failCount > 0">
              <div class="fail-title">失败原因：</div>
              <el-table
                :data="failList"
                style="width: 100%"
                max-height="200"
              >
                <el-table-column prop="expertName" label="专家姓名"></el-table-column>
                <el-table-column prop="reason" label="失败原因"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <template v-if="!isStoraging && !storageComplete">
          <el-button @click="storageDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="startStorage" :disabled="selectedRows.length === 0">
            确认入库
          </el-button>
        </template>
        <template v-if="storageComplete">
          <el-button type="primary" @click="closeStorageDialog">完成</el-button>
        </template>
      </div>
    </el-dialog>
    <!-- 审核对话框 -->
    <el-dialog 
      :visible.sync="auditDialogVisible" 
      title="专家审核" 
      width="70%" 
      :close-on-click-modal="false"
      class="audit-dialog"
    >
      <div class="audit-container">
        <div class="audit-header">
          <div class="selected-count">
            已选择 <span class="count-number">{{ selectedRows.length }}</span> 位专家
          </div>
          <!-- <div class="audit-actions">
            <el-radio-group v-model="batchAuditStatus" size="medium">
              <el-radio-button label="审核通过">审核通过</el-radio-button>
              <el-radio-button label="审核不通过">审核不通过</el-radio-button>
            </el-radio-group>
          </div> -->
        </div>

        <div class="audit-content">
          <el-table
            :data="selectedRows"
            style="width: 100%"
            max-height="400"
          >
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="name" label="专家姓名"></el-table-column>
            <el-table-column prop="title" label="职称"></el-table-column>
            <el-table-column prop="primaryMajor" label="专业">
              <template slot-scope="scope">
                {{ formatMajor(scope.row.primaryMajor) }}
              </template>
            </el-table-column>
            <el-table-column prop="auditStatus" label="当前状态">
              <template slot-scope="scope">
                <el-tag :type="getStatusType(scope.row.auditStatus)">
                  {{ scope.row.auditStatus }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="审核结果" width="200">
              <template slot-scope="scope">
                  <!-- " -->
                <!--  -->
                <el-select @change="(val)=>changeresult(val,scope.row)" v-model="scope.row.newauditStatus" placeholder="请选择">
    <el-option
      v-for="item in resultoptions"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
              </template>
            </el-table-column>

            <el-table-column label="未通过原因" width="200">
              <template slot-scope="scope">
                  <!-- " -->
                <!--  -->
                <el-button v-if="scope.row.newauditStatus == '未通过'" @click="look(scope.row)">查看</el-button>
                <!-- <el-select v-if="scope.row.newauditStatus == '未通过'" v-model="scope.row.newauditStatus" placeholder="请选择">
    <el-option
      v-for="item in resultoptions"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="auditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAudit(row)">
          确认
        </el-button>
      </div>
    </el-dialog>
<!-- 原因对话框 -->
    <el-dialog 
      :visible.sync="reasonDialogVisible" 
      title="不通过原因" 
      width="40%" 
      :close-on-click-modal="false"
      class="audit-dialog"
    >
      <div class="audit-container">

        <div class="audit-content">
          <el-form :model="reasondata" label-width="100px" class="aligned-form" style="margin-left:20%">
        <el-form-item label="不通过原因">
          <el-input v-model="reasondata.auditOpinion" />
        </el-form-item>
          </el-form>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="reasonDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="okreason()" >
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import editblock from '../dashboard/show.vue'
import { getExpertBasicInfo, page, deleteExpertBasicInfo, admissionexpert, noadmissionexpert, outlibrary, checkinfo, ininfo, deleteExperts, exportPDF, getExpertAttach } from '@/api/table'
export default {
  name: 'ExpertDashboard',
  components: {
    editblock
  },
  data() {
    return {
      row:'',
      role:'',
      resultoptions:[{
          value: '通过',
          label: '通过'
        }, {
          value: '未通过',
          label: '未通过'
        }],
      searchForm: {
        expertName: '',
        title: '',
        primaryMajor: [], 
        gender: '',
        ageStart: '',
        ageEnd: '',
        auditStatus: '',
        belong: ''
      },
      reasondata:{
        auditOpinion:''
      },
      output1: {
        name:'',
        id:'',
        reason:'',
      },
      titleOptions: [
        { value: "副高级职称", label: "副高级职称" },
        { value: "正高级职称", label: "正高级职称" },
        { value: "同等执业资格", label: "同等执业资格" },
        { value: "其他", label: "其他" }
      ],
      majorOptions: [
        { value: "建设管理", label: "建设管理" },
        { value: "计划管理", label: "计划管理" },
        { value: "质量管理", label: "质量管理" },
        { value: "水利规划", label: "水利规划" },
        { value: "水文泥沙", label: "水文泥沙" },
        { value: "水资源", label: "水资源" },
        { value: "节水评价", label: "节水评价" },
        { value: "水土保持", label: "水土保持" },
        { value: "农田水利", label: "农田水利" },
        { value: "城乡供水", label: "城乡供水" },
        { value: "水工结构", label: "水工结构" },
        { value: "河道治理", label: "河道治理" },
        { value: "工程地质与工程测绘", label: "工程地质与工程测绘" },
        { value: "水旱灾害防御抢险", label: "水旱灾害防御抢险" },
        { value: "工程造价与经济评价", label: "工程造价与经济评价" },
        { value: "征地移民", label: "征地移民" },
        { value: "电气机电与金属结构", label: "电气机电与金属结构" },
        { value: "水利政策法规", label: "水利政策法规" },
        { value: "施工组织与管理", label: "施工组织与管理" },
        { value: "水利信息化", label: "水利信息化" },
        { value: "工程管理", label: "工程管理" },
        { value: "节能评价", label: "节能评价" },
        { value: "资金管理", label: "资金管理" },
        { value: "水力发电", label: "水力发电" },
        { value: "劳动安全与工业卫生（安全生产）", label: "劳动安全与工业卫生（安全生产）" },
        { value: "环境影响评价", label: "环境影响评价" },
        { value: "社会稳定分析", label: "社会稳定分析" },
        { value: "质量检测", label: "质量检测" },
        { value: "水文化", label: "水文化" }
      ],
      auditStatusOptions: [
        { value: '待审核', label: '待审核' },
        { value: '通过', label: '通过' },
        { value: '未通过', label: '未通过' },
        {value:'已入库',label:'已入库'}
      ],
      reasonDialogVisible:false,
      officeOptions: [
        { value: '建监处', label: '建监处' },
        { value: '水保处', label: '水保处' },
        { value: '农水处', label: '农水处' },
        { value: '水资源处', label: '水资源处' },
        { value: '移民处', label: '移民处' },
        { value: '河湖处', label: '河湖处' },
        { value: '节水办', label: '节水办' },
        { value: '规计处', label: '规计处' },
        { value: '财审处', label: '财审处' },
        { value: '防御处', label: '防御处' },
      ],
      // 新增学历选项
      educationOptions: [
        {
          value: "博士研究生",
          label: "博士研究生",
        },
        {
          value: "硕士研究生",
          label: "硕士研究生",
        },
        {
          value: "大学本科",
          label: "大学本科",
        },
        {
          value: "大学专科",
          label: "大学专科",
        },
        {
          value: "高中/中专",
          label: "高中/中专",
        },
        {
          value: "初中及以下",
          label: "初中及以下",
        },
      ],
      expertList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      layout: 'total, sizes, prev, pager, next, jumper',
      // 新增相关数据
      addDialogVisible: false,
      addForm: {
        expertName: '',
        gender: '男',
        age: null,
        position: '',
        title: '',
        primaryMajor: [],
        education: '', 
        unit: '',
        auditStatus: '',
        belong: ''
      },
      addRules: {
        expertName: [
          { required: true, message: '请输入专家姓名', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字值', trigger: 'blur' }
        ],
        position: [
          { required: true, message: '请输入职位', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请选择职称', trigger: 'change' }
        ],
        primaryMajor: [
          { required: true, message: '请选择专业', trigger: 'change' }
        ],
        education: [
          { required: true, message: '请选择学历', trigger: 'change' }
        ],
        unit: [
          { required: true, message: '请输入单位', trigger: 'blur' }
        ],
        auditStatus: [
          { required: true, message: '请选择审核状态', trigger: 'change' }
        ],
        belong: [
          { required: true, message: '请选择审核处室', trigger: 'change' }
        ]
      },

      // 删除相关数据
      deleteDialogVisible: false,
      deleteForm: {
        selectedIds: []
      },
      selectedRows: [],
      // API配置
      apiConfig: {
        baseUrl: process.env.VUE_APP_BASE_API || '',
        useMock: false // 切换真实API时设为false
      },
      inbutton:false,
      storageDialogVisible: false,
      isStoraging: false,
      storageProgress: 0,
      storageComplete: false,
      storageStatus: '',
      successCount: 0,
      failCount: 0,
      failList: [],
      auditDialogVisible: false,
      batchAuditStatus: '通过',
      rejectReason: '',
      showRejectReason: false,
      expertDetail: null, //用于存放专家详情
      editvisibale: false,
      basicvisible: true,
      row: null,
    }
  },
  computed: {
    getStorageStatusType() {
      switch(this.storageStatus) {
        case '准备入库': return 'info';
        case '入库中': return 'warning';
        case '入库完成': return 'success';
        case '入库异常': return 'danger';
        default: return 'info';
      }
    },
    canConfirmAudit() {
      // 如果有任何专家被设置为不通过，且没有填写原因，则不能确认
      if (this.showRejectReason && !this.rejectReason.trim()) {
        return false;
      }
      // 检查是否所有专家都已选择审核结果
      return this.selectedRows.every(row => row.newAuditStatus);
    }
  },
  watch: {
    batchAuditStatus(newValue) {
      // 批量设置审核状态
      this.selectedRows.forEach(row => {
        row.newAuditStatus = newValue;
      });
      this.showRejectReason = newValue === '审核不通过';
    }
  },
  mounted() {
    this.role = sessionStorage.getItem('role')
       if (this.role == 'SYSTEM' || this.role == 'COMMON' ||this.role == 'GJC'  || this.role == 'lEADER' ) {
         this.inbutton = true
       }
    this.fetchExpertList();
    const id = this.$route.query.id;
    if (id) {
      this.getExpertDetail(id);
    }
  },
  methods: {
    Admissionexpert(id){
      admissionexpert(id).then(response => {
        console.log("111111");
        console.log(response.data);
      })
    },
    //审核不通过接口
    Noadmissionexpert(id,auditOpinion){
      console.log("jinlai!!!!!!!!!!!!!!!!");
      const param = {
        id: id,
        auditOpinion: auditOpinion
      }
      noadmissionexpert(param).then(response => {
        console.log("执行了noadmissionexpert方法");
        console.log(response.data);
      })
    },
    // 获取专家列表的方法
    fetchExpertList(params = {}) {
      this.loading = true;
      // 构建查询参数
      const queryParams = {
        page: this.currentPage,
        pageSize: this.pageSize,
        name: this.searchForm.expertName || undefined,
        title: this.searchForm.title || undefined,
        primaryMajor: this.searchForm.primaryMajor || undefined,
        gender: this.searchForm.gender || undefined,
        ageStart: this.searchForm.ageStart || undefined,
        ageEnd: this.searchForm.ageEnd || undefined,
        auditStatus: this.searchForm.auditStatus || undefined,
        belong: this.searchForm.belong || undefined,
        ...params
      };

      // 移除所有undefined的属性
      Object.keys(queryParams).forEach(key => {
        if (queryParams[key] === undefined) {
          delete queryParams[key];
        }
      });

      console.log('查询参数：', queryParams);

      page(queryParams).then(response => {
        console.log('API响应数据：', response);
        if (response.code === 200 && response.data) {
          if (Array.isArray(response.data.records)) {
            if (response.data.records.length > 0) {
              console.log('数据结构示例:', response.data.records[0]);
            }
            this.expertList = response.data.records.map(record => ({
              ...record,
              expert_id: record.expert_id || record.expertId 
            }));
            this.total = response.data.total || 0;
            if (this.expertList.length === 0) {
              this.$message.info('没有找到符合条件的专家数据');
            }
          } else {
            console.error('响应数据格式不正确:', response.data);
            this.$message.error('数据格式不正确');
          }
        } else {
          console.error('API响应异常:', response);
          this.$message.error(response.message || '获取专家列表失败');
        }
      }).catch(error => {
        console.error('获取专家列表失败:', error);
        this.$message.error('获取专家列表失败，请重试');
      }).finally(() => {
        this.loading = false;
      });
    },
    getAgeFromBirthDate(birthDate) {
      if (!birthDate) return '';
      const birth = new Date(birthDate);
      const now = new Date();
      let age = now.getFullYear() - birth.getFullYear();
      const m = now.getMonth() - birth.getMonth();
      if (m < 0 || (m === 0 && now.getDate() < birth.getDate())) {
        age--;
      }
      return age;
    },

    search() {
      this.currentPage = 1; 
      this.loading = true; 
      this.fetchExpertList(); 
    },
    
    resetForm() {
      this.$confirm('确定要清空所有筛选条件吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 重置表单数据
        this.searchForm = {
          expertName: '',
          title: '',
          primaryMajor: [], 
          gender: '', 
          ageEnd: '',
          auditStatus: '',
          belong: '',
        };
        this.search();
        this.$message.success('筛选条件已清空');
      }).catch(() => {
      });
    },
    
    // 获取状态标签类型
    getStatusType(status) {
      switch (status) {
        case '待审核': return 'info';
        case '通过': return 'success';
        case '未通过': return 'danger';
        default: return 'info';
      }
    },
    
    goToDetail(row){
        this.editvisibale = true
        this.basicvisible = false
        console.log('查看专家信息:', row);
        
        // 获取专家详细信息
        getExpertBasicInfo(row.expertId).then(response => {
          if (response && response.data) {
            // 完整的专家信息
            this.row = response.data;
            
            // 获取专家附件信息
            getExpertAttach(row.expertId).then(attachResponse => {
              console.log('获取到的附件信息:', attachResponse);
              if (attachResponse.code === 200 && attachResponse.data) {
                const attachData = attachResponse.data;
                // 存储附件ID信息
                const fileIds = {
                  idCard: attachData.idCard,
                  certificate: attachData.certificate,
                  qualification: attachData.qualification,
                  supportMater: attachData.supportMater,
                  applicationForm: attachData.applicationForm
                };
                console.log('提取的文件ID:', fileIds);
                
                // 将文件ID信息添加到row中
                this.$set(this.row, 'attachmentIds', fileIds);
              }
            }).catch(error => {
              console.error('获取附件信息失败:', error);
            });

            // 获取工作经历和其他信息
            if (this.row.expertId) {
              this.getWorkExperience(this.row.expertId);
              this.getSocialPart(this.row.expertId);
              this.getOtherInfo(this.row.expertId);
            } else {
              console.error('专家ID不存在');
            }
          }
        }).catch(error => {
          console.error('获取专家详细信息失败:', error);
          this.$message.error('获取专家详细信息失败');
        });
      },
      // 获取工作经历
      getWorkExperience(expertId) {
        console.log('获取工作经历，专家ID:', expertId);
        this.$http.get(`/admin/expertWorkExper/get/${expertId}`).then(response => {
          console.log('工作经历数据:', response.data);
          if (response && response.data) {
            // 映射后端字段到前端字段
            const mappedExperience = response.data.map(item => ({
              workUnit: item.orgName || '',
              startTime: item.startDate || '',
              endTime: item.endDate || '',
              jobTitle: item.title || '',
              jobDuty: item.position || '',
              id: item.id,
              expertId: item.expertId
            }));
            console.log('映射后的工作经历:', mappedExperience);
            this.$set(this.row, 'workExperience', mappedExperience);
          }
        }).catch(error => {
          console.error('获取工作经历失败:', error);
          this.$message.error('获取工作经历失败');
        });
      },
      // 获取社会兼、聘职情况
      getSocialPart(expertId) {
        console.log('获取社会兼职情况，专家ID:', expertId);
        this.$http.get(`/admin/expertSocialPart/get/${expertId}`).then(response => {
          console.log('社会兼职数据:', response.data);
          if (response && response.data) {
            // 映射后端字段到前端字段
            const mappedSocialPart = response.data.map(item => ({
              partTimeUnit: item.orgName || '',
              startTime: item.startDate || '',
              endTime: item.endDate || '',
              role: item.role || '',
              id: item.id,
              expertId: item.expertId
            }));
            console.log('映射后的社会兼职:', mappedSocialPart);
            this.$set(this.row, 'socialExperience', mappedSocialPart);
          }
        }).catch(error => {
          console.error('获取社会兼职情况失败:', error);
          this.$message.error('获取社会兼职情况失败');
        });
      },
      // 获取其他信息
      getOtherInfo(expertId) {
        console.log('获取专家其他信息，专家ID:', expertId);
        this.$http.get(`/admin/expertOtherInfo/get/${expertId}`).then(response => {
          console.log('其他信息数据:', response.data);
          if (response && response.data) {
            // 映射后端字段到前端字段
            const otherInfo = {
              researchAchievements: response.data.researchResults || '',
              projectMatters: response.data.projectConsultation || '',
              id: response.data.id,
              expertId: response.data.expertId,
              createTime: response.data.createTime,
              updateTime: response.data.updateTime
            };
            console.log('映射后的其他信息:', otherInfo);
            this.$set(this.row, 'otherInfo', otherInfo);
          }
        }).catch(error => {
          console.error('获取其他信息失败:', error);
          this.$message.error('获取其他信息失败');
        });
      },

    // 分页相关方法
    handleSizeChange(size) {
      this.pageSize = size;
      this.fetchExpertList();
    },
    
    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchExpertList({page: page, pageSize: 10});
    },
    
    // 操作方法
    addExpert() {
      // 重置新增表单数据
      this.addForm = {
        expertName: '',
        gender: '',
        age: null,
        position: '',
        title: '',
        primaryMajor: [],
        education: '', 
        unit: '',
        auditStatus: '',
        belong: ''
      };
      this.addDialogVisible = true;
    },
    
    // 删除选中专家
    deleteSelected() {
      this.selectedRows = this.$refs.expertTable.selection;
      
      if (this.selectedRows.length === 0) {
        this.$message.warning('请先选择要删除的专家');
        return;
      }
      
      // 显示删除确认对话框
      this.deleteDialogVisible = true;
    },
    
    // 确认删除
    async confirmDelete() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择要删除的专家');
        return;
      }

      try {
        // 打印完整的选中行数据，用于调试
        console.log('选中的行数据:', this.selectedRows);

        const expertId = this.selectedRows.map(row => {
          // 打印每一行的数据结构
          console.log('当前行数据:', row);
          
          // 尝试获取expert_id
          const id = row.expert_id || row.expertId;
          if (!id) {
            console.error('无法获取expert_id，完整行数据:', row);
            throw new Error('无法获取专家ID');
          }
          return id;
        });

        // 验证ID数组
        if (expertId.some(id => !id)) {
          throw new Error('存在无效的专家ID');
        }

        console.log('要删除的专家IDs:', expertId);

        const response = await deleteExpertBasicInfo(expertId);
        console.log('删除接口响应:', response);
        
        if (response.code === 200) {
          this.$message.success('删除成功');
          this.deleteDialogVisible = false;
          // 刷新列表
          await this.fetchExpertList();
          // 清空选中的行
          this.$refs.expertTable.clearSelection();
        } else {
          this.$message.error(response.message || '删除失败');
        }
      } catch (error) {
        console.error('删除失败:', error);
        this.$message.error(error.message || '删除失败，请重试');
      }
    },
    output(row){
      this.deleteDialogVisible = true;
      this.output1.name = row.name
      this.output1.id = row.id
      this.output1.reason = ''
    },
    okreason(){
      this.reasonDialogVisible = false
      console.log(this.reasondata);
    },
    
    // 导出数据功能
    async exportData() {
      try {
        // 检查是否有选中的行
        this.selectedRows = this.$refs.expertTable.selection;
        
        // 获取要导出的专家ID列表
        let ids = [];
        if (this.selectedRows.length > 0) {
          ids = this.selectedRows.map(row => row.expertId);
        } else {
          ids = this.expertList.map(row => row.expertId);
        }

        if (ids.length === 0) {
          this.$message.warning('没有可导出的数据');
          return;
        }

        const requestData = {
          ids: ids
        };

        this.$message.info('正在准备导出数据，请稍候...');
        
        // 使用原生 XMLHttpRequest 处理下载
        const xhr = new XMLHttpRequest();
        xhr.open('POST', process.env.VUE_APP_BASE_API + '/admin/common/pdfExport', true);
        xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
        xhr.setRequestHeader('Accept', 'application/zip, application/octet-stream');
        xhr.responseType = 'blob';

        const token = sessionStorage.getItem('token');
        if (!token) {
          this.$message.error('未登录或登录已过期，请重新登录');
          return;
        }
        xhr.setRequestHeader('token', token);
        
        xhr.onload = () => {
          if (xhr.status === 200) {
            // 创建 Blob
            const blob = new Blob([xhr.response], { type: 'application/zip' });
            
            // 创建下载链接
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '陕西省水利专家信息总览.zip';
            document.body.appendChild(link);
            link.click();
            
            // 清理
            setTimeout(() => {
              document.body.removeChild(link);
              window.URL.revokeObjectURL(url);
            }, 100);

            this.$message.success('导出成功');
          } else {
            throw new Error('导出失败');
          }
        };

        xhr.onerror = () => {
          this.$message.error('导出失败，请重试');
        };

        // 发送请求
        xhr.send(JSON.stringify(requestData));

      } catch (error) {
        console.error('导出失败:', error);
        this.$message.error(`导出失败: ${error.message || '请重试'}`);
      }
    },
    
    // 获取导出范围的文本描述
    getExportScopeText() {
      switch (this.exportForm.scope) {
        case 'current': return '当前页';
        case 'all': return '全部';
        case 'selected': return '选中';
        default: return '';
      }
    },
    
    audit() {
      this.selectedRows = this.$refs.expertTable.selection;
      
      if (this.selectedRows.length === 0) {
        this.$message.warning('请先选择要审核的专家');
        return;
      }
console.log(this.selectedRows);
      // 初始化每个专家的新审核状态
      this.selectedRows.forEach(row => {
        row.newAuditStatus = '';
      });

      // // 重置审核状态
      // this.rejectReason = '';
      // this.showRejectReason = this.batchAuditStatus === '审核不通过';
      
      // 显示对话框
      this.auditDialogVisible = true;
    },
    
    storage() {
      this.$message.info('入库功能');
    },
    
    // viewDetail(row) {
    //   // 将专家数据存储到 localStorage，因为路由参数可能无法传递复杂对象
    //   localStorage.setItem('currentExpertData', JSON.stringify(row));
    //   // 跳转到表单页面
    //   this.$router.push({
    //     path: '/form',
    //     query: { 
    //       id: row.id,
    //       mode: 'view'
    //     }
    //   });
    // },
    
    // // 编辑专家信息
    // editExpert(row) {
    //   // 跳转到form/indexb页面进行编辑
    //   this.$router.push({
    //     path: '/form/indexb',
    //     query: { 
    //       id: row.id,
    //       expertId: row.expertId,
    //       mode: 'edit'
    //     }
    //   });
    // },
    
    outputdata() {
      console.log(123);
      console.log(this.output1);
      outlibrary(this.output1.id, this.output1.reason).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message.success('出库成功！')
          this.deleteDialogVisible = false
          this.fetchExpertList()
        }
      })
    },
    // 新增专家信息
    saveAdd() {
      this.$refs.addFormRef.validate(valid => {
        if (valid) {
          this.loading = true;
          
          if (this.apiConfig.useMock) {
            // 模拟API调用延迟
            setTimeout(() => {
              try {
                // 创建新专家对象
                const newExpert = {
                  id: Date.now(), // 使用时间戳作为临时ID
                  expertName: this.addForm.expertName,
                  auditStatus: this.addForm.auditStatus,
                  auditOffice: this.addForm.auditOffice,
                  gender: this.addForm.gender,
                  age: this.addForm.age,
                  position: this.addForm.position,
                  primaryMajor: this.addForm.primaryMajor,
                  education: this.addForm.education, // 使用下拉框的值
                  title: this.addForm.title,
                  unit: this.addForm.unit,
                  entryTime: new Date().toISOString().slice(0, 10) // 当前日期
                };
                
                // 添加到表格数据
                this.expertList.unshift(newExpert);
                
                // 刷新数据
                this.fetchExpertList();
                
                // 关闭对话框
                this.addDialogVisible = false;
                
                // 显示成功消息
                this.$message({
                  type: 'success',
                  message: '专家信息添加成功'
                });
              } catch (error) {
                console.error('添加失败:', error);
                this.$message({
                  type: 'error',
                  message: '添加失败，请重试'
                });
              } finally {
                this.loading = false;
              }
            }, 500);
          } else {
            // 真实API调用
            axios.post(`${this.apiConfig.baseUrl}/api/expert`, this.addForm)
              .then(() => {
                // 刷新数据
                this.fetchExpertList();
                
                // 关闭对话框
                this.addDialogVisible = false;
                
                // 显示成功消息
                this.$message({
                  type: 'success',
                  message: '专家信息添加成功'
                });
              })
              .catch(error => {
                console.error('添加失败:', error);
                this.$message({
                  type: 'error',
                  message: '添加失败，请重试'
                });
              })
              .finally(() => {
                this.loading = false;
              });
          }
        } else {
          this.$message({
            type: 'warning',
            message: '请完成必填项'
          });
          return false;
        }
      });
    },
    
    // 处理专业选择变化
    handleMajorChange(value) {
      console.log('选中的专业：', value);
      if (value && value.length > 0) {
        // 获取最后一级专业名称
        const selectedMajor = value[value.length - 1];
        console.log('选中的具体专业：', selectedMajor);
        // 更新searchForm中的专业值
        this.searchForm.primaryMajor = selectedMajor; // 直接使用最后一级专业名称
        // 触发搜索
        this.currentPage = 1; // 重置页码
        this.search();
      } else {
        // 如果清空了专业选择
        this.searchForm.primaryMajor = undefined;
        this.currentPage = 1; // 重置页码
        this.search();
      }
    },
    look(val) {
      this.reasondata = val
      this.reasonDialogVisible = true
      console.log(val);
    },
    // 格式化专业显示
    formatMajor(primaryMajor) {
      if (!primaryMajor) return '';
      if (Array.isArray(primaryMajor)) {
        // 如果是数组，说明是级联选择器的值，用 > 连接
        return primaryMajor.join(' > ');
      }
      // 如果是字符串，直接返回
      return primaryMajor;
    },
    
    // 获取学历标签
    getEducationLabel(value) {
      const education = this.educationOptions.find(item => item.value === value);
      return education ? education.label : value;
    },
    
    // 打开入库对话框
    storage() {
      this.selectedRows = this.$refs.expertTable.selection;
      
      if (this.selectedRows.length === 0) {
        this.$message.warning('请先选择要入库的专家');
        return;
      }

      // 检查是否都是规计处的专家
      // const nonPlanningExperts = this.selectedRows.filter(expert => expert.belong !== '规计处');
      // if (nonPlanningExperts.length > 0) {
      //   this.$message.warning('只能对规计处的专家进行入库操作');
      //   return;
      // }

      // 重置入库状态
      this.isStoraging = false;
      this.storageProgress = 0;
      this.storageComplete = false;
      this.storageStatus = '准备入库';
      this.successCount = 0;
      this.failCount = 0;
      this.failList = [];
      console.log(this.selectedRows);
      // 显示对话框
      this.storageDialogVisible = true;
    },

    // 开始入库操作
    async startStorage() {
      // this.isStoraging = true;
      // this.storageStatus = '入库中';
      console.log(this.selectedRows);
      const ids = this.selectedRows.map(item => item.id);
      ininfo(ids).then((res)=>{
        if (res.code == 200) {
          this.$message.success('入库成功！')
          this.storageDialogVisible  = false
          this.fetchExpertList()

        }
      })
      // try {
      //   // 模拟入库过程
      //   const total = this.selectedRows.length;
      //   for (let i = 0; i < total; i++) {
      //     const expert = this.selectedRows[i];
          
      //     // 更新进度
      //     this.storageProgress = Math.floor((i + 1) * 100 / total);
          
      //     // 模拟API调用
      //     await new Promise(resolve => setTimeout(resolve, 800));
      //     ininfo()
      //     // 模拟随机成功/失败
      //     const success = Math.random() > 0.2;
      //     if (success) {
      //       expert.storageStatus = {
      //         type: 'success',
      //         text: '入库成功'
      //       };
      //       this.successCount++;
      //     } else {
      //       expert.storageStatus = {
      //         type: 'danger',
      //         text: '入库失败'
      //       };
      //       this.failCount++;
      //       this.failList.push({
      //         expertName: expert.expertName,
      //         reason: '系统处理异常，请稍后重试'
      //       });
      //     }
      //   }
        
      //   // 完成入库
      //   this.storageComplete = true;
      //   this.storageStatus = '入库完成';
        
      //   // 显示结果消息
      //   if (this.failCount === 0) {
      //     this.$message.success(`已成功入库 ${this.successCount} 位专家`);
      //   } else {
      //     this.$message.warning(`入库完成，成功 ${this.successCount} 位，失败 ${this.failCount} 位`);
      //   }
        
      // } catch (error) {
      //   console.error('入库失败:', error);
      //   this.storageStatus = '入库异常';
      //   this.$message.error('入库过程发生异常，请重试');
      // }
    },

    // 关闭入库对话框
    closeStorageDialog() {
      this.storageDialogVisible = false;
      // 刷新列表数据
      this.fetchExpertList();
    },

    // 处理单个专家审核状态变化
    handleAuditStatusChange(row) {
      // 检查是否有任何专家被设置为不通过
      this.showRejectReason = this.selectedRows.some(row => row.newAuditStatus === '审核不通过');
    },

    // 确认审核
    async confirmAudit() {
      console.log(this.selectedRows);
      const a = []
      for (let i = 0; i < this.selectedRows.length; i++) {
        const element = {
          auditStatus:this.selectedRows[i].newauditStatus,
          auditOpinion:this.selectedRows[i].auditOpinion,
          id:this.selectedRows[i].id
        }
        a.push(element)
      }
      checkinfo(a).then((res)=>{
        if (res.code == 200) {
          this.$message.success('审核成功')
          this.auditDialogVisible =false
          this.fetchExpertList()
          
        }
      })
      // console.log("scope.row-*-----------------------");
      // console.log( this.$refs.expertTable.selection);
      // console.log( this.$refs.expertTable.selection[0].id);
      // if (this.showRejectReason && !this.rejectReason.trim()) {
      //   this.$message.warning('请填写审核不通过的原因');
      //   console.log("调用后端接口")
      //   return;
      // }
      // try {
      //   // 模拟API调用
      //   await new Promise(resolve => setTimeout(resolve, 800));
      //   this.Noadmissionexpert(this.$refs.expertTable.selection[0].id,this.rejectReason);
      //   // 更新专家状态
      //   this.selectedRows.forEach(expert => {
      //     expert.auditStatus = expert.newAuditStatus;
      //     if (expert.newAuditStatus === '未通过') {
      //       expert.rejectReason = this.rejectReason;//编辑框
      //     }
      //     else if(expert.newAuditStatus === '通过')
      //     {
      //       this.admissionexpert(expert.id).then((res)=>{
      //         if(res.code === 200)
      //         {
      //           this.$message.success('审核通过成功');
      //   this.fetchExpertList();
      //         }else{
      //           this.$message.error('审核通过失败');
      //         }
      //       })
      //     }
      //   });

      //   // 关闭对话框
      //   this.auditDialogVisible = false;

      //   // 刷新数据

      //   // 显示成功消息
      //   // this.$message.success('审核操作已完成');

      // } catch (error) {
      //   console.error('审核失败:', error);
      //   this.$message.error('审核失败，请重试');
      // }
    },
    // 查看专家详细信息
    changeresult(val,row) {
      console.log(val,row);
      // this.reasondata  = row
      // this.reasondata.reason = ''
      if (val == '未通过') {
        this.reasonDialogVisible = true
        this.reasondata  = row
      }
    },
    viewExpert(row) {
      // 将专家数据存储到 localStorage
      localStorage.setItem('expertData', JSON.stringify({
        ...row,
        // 添加评审会相关信息
        reviewInfo: {
          totalCount: row.reviewCount || 0,
          records: [
            {
              reviewName: '2023年度水利工程评审会',
              changeCount: 2,
              evaluation: '专业知识扎实，评审意见专业且中肯',
              rating: 4.5
            },
            {
              reviewName: '南水北调工程技术评审会',
              changeCount: 1,
              evaluation: '对项目细节把握准确，提供了很多建设性意见',
              rating: 5
            },
            {
              reviewName: '2024年度水利项目可行性研究评审会',
              changeCount: 3,
              evaluation: '能够深入分析项目风险点，提供了很好的解决方案',
              rating: 4.8
            }
          ]
        }
      }));

      // 跳转到专家详情页面
      // this.$router.push('/form/index');
    },
    // // 根据id查询专家详情
    // getExpertDetail(id) {
    //   if (!id) {
    //     console.warn('未获取到专家id');
    //     return;
    //   }
    //   getExpertById(id).then(res => {
    //     console.log(1000)
    //     console.log('专家详情返回：', res);
    //     if (res && res.code === 200) {
    //       if (res.data) {
    //         this.expertDetail = res.data;
    //       } else {
    //         this.$message.warning('未找到该专家信息');
    //       }
    //     } else {
    //       this.$message.error(res.message || '获取专家信息失败');
    //     }
    //   }).catch(err => {
    //     console.error('请求专家详情异常:', err);
    //   });
    // },
    // goToDetail(id) {
    //   this.$router.push({
    //     path: '/form/index',
    //     query: {
    //       id,
    //       mode: 'view'
    //     }
    //   });
    // },
    back2() {
      this.editvisibale = false;
      this.basicvisible = true;
      this.row = null;
    }
  }
}
</script>

<style lang="less" scoped>
.dashboard-container {
  padding: 1.25rem;
  background-color: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.1);
  
  // 添加响应式容器样式
  @media screen and (max-width: 1200px) {
    padding: 1rem;
  }
  
  @media screen and (max-width: 768px) {
    padding: 0.75rem;
  }

  .mb-4 {
    margin-bottom: 1rem;
  }
  
  .mx-2 {
    margin: 0 0.5rem;
  }
}

// 搜索表单响应式样式
.el-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  
  @media screen and (max-width: 1200px) {
    gap: 0.75rem;
  }
  
  @media screen and (max-width: 768px) {
    gap: 0.5rem;
  }

  .el-form-item {
    margin-right: 0;
    margin-bottom: 1rem;
    
    @media screen and (max-width: 1200px) {
      flex: 0 0 calc(33.33% - 0.75rem);
    }
    
    @media screen and (max-width: 992px) {
      flex: 0 0 calc(50% - 0.5rem);
    }
    
    @media screen and (max-width: 768px) {
      flex: 0 0 100%;
    }
  }
}

// 按钮组响应式样式
.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: 1rem;
  
  @media screen and (max-width: 768px) {
    gap: 0.5rem;
    
    .el-button {
      flex: 1 1 calc(50% - 0.25rem);
      margin: 0;
    }
  }
  
  @media screen and (max-width: 480px) {
    .el-button {
      flex: 1 1 100%;
    }
  }
}

// 表格响应式样式
.el-table {
  width: 100%;
  overflow-x: auto;
  
  @media screen and (max-width: 1200px) {
    font-size: 0.875rem;
  }
  
  @media screen and (max-width: 768px) {
    font-size: 0.75rem;
    
    .el-table__header-wrapper,
    .el-table__body-wrapper {
      overflow-x: auto;
    }
    
    .cell {
      padding: 0.5rem;
    }
  }
}

// 分页组件响应式样式
.el-pagination {
  margin-top: 1rem;
  text-align: center;
  
  @media screen and (max-width: 768px) {
    text-align: center;
    
    .el-pagination__sizes {
      display: none !important;
    }
  }
}

// 对话框响应式样式
.el-dialog {
  @media screen and (max-width: 992px) {
    width: 80% !important;
  }
  
  @media screen and (max-width: 768px) {
    width: 95% !important;
    margin: 0.5rem auto !important;
    
    .el-dialog__body {
      padding: 1rem;
    }
  }
}

// 表单项响应式样式
.custom-form-item {
  @media screen and (max-width: 1200px) {
    width: 100%;
    
    .el-input {
      width: 100% !important;
    }
  }
}

// 年龄区间输入框响应式样式
.age-label {
  @media screen and (max-width: 768px) {
    flex-direction: column;
    gap: 0.5rem;
    
    .el-input {
      width: 100%;
    }
    
    .mx-2 {
      margin: 0.25rem 0;
    }
  }
}

// 入库和审核对话框响应式样式
.storage-dialog,
.audit-dialog {
  .storage-container,
  .audit-container {
    @media screen and (max-width: 768px) {
      padding: 0 0.5rem;
    }
  }
  
  .storage-header,
  .audit-header {
    @media screen and (max-width: 768px) {
      flex-direction: column;
      gap: 1rem;
      
      .audit-actions {
        width: 100%;
        
        .el-radio-group {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
        }
      }
    }
  }
}

// 按钮响应式样式
.custom-success-btn,
.custom-danger-btn,
.custom-primary-btn,
.custom-info-btn,
.custom-warning-btn {
  @media screen and (max-width: 768px) {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

// 表单操作按钮响应式样式
.form-actions {
  @media screen and (max-width: 768px) {
    flex-direction: column;
    width: 100%;
    
    .el-button {
      width: 100%;
      margin-left: 0;
      margin-bottom: 0.5rem;
    }
  }
}

// 空状态提示响应式样式
.empty-tip {
  @media screen and (max-width: 768px) {
    padding: 1rem;
    font-size: 0.875rem;
  }
}

.primary-btn{
  width: 6.0625rem;
  height: 2.5rem;
  background-color: #205382;
  border-radius: 0.3125rem;
  color: #fff;
  font-size: 1rem;
}
.custom-success-btn {
  width: 6.0625rem;
  height: 2.5rem;
  background-color: rgba(29, 183, 82, 0.74);
  border-radius: 0.3125rem;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.35);
  &:hover,
  &:focus {
    background: #1DB752;
    border-radius: 0.3125rem;
    color: #fff;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
  }
  &:active {
    box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.3);
  }
}
.custom-danger-btn {
  width: 6.0625rem;
  height: 2.5rem;
  background-color: rgba(225, 63, 31, 0.7);
  border-radius: 0.3125rem;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.35);
  &:hover,
  &:focus {
    background: #E13F1F;
    border-radius: 0.3125rem;
    color: #fff;
  }
}
.custom-primary-btn {
  width: 6.0625rem;
  height: 2.5rem;
  background-color: rgba(45, 107, 164, 0.7);
  border-radius: 0.3125rem;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.35);

  &:hover,
  &:focus {
    background: #2D6BA4;
    border-radius: 0.3125rem;
    color: #fff;
  }
}
.custom-info-btn {
  width: 6.0625rem;
  height: 2.5rem;
  background-color: rgba(31, 193, 189, 0.7);
  border-radius: 0.3125rem;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.35);

  &:hover,
  &:focus {
    background: #1FC1BD;
    border-radius: 0.3125rem;
    color: #fff;
  }
}

.custom-warning-btn {
  width: 6.0625rem;
  height: 2.5rem;
  background-color: rgba(26, 127, 221, 0.7);
  border-radius: 0.3125rem;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.35);

  &:hover,
  &:focus {
    background: #1A7FDD;
    border-radius: 0.3125rem;
    color: #fff;
  }
}

.button-container {
  display: flex;
  gap: 0.625rem;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
}

.age-label {
  display: flex;
  align-items: center;
}

/* 新增样式类，控制表单行布局 */
.el-form-item {
  display: inline-flex;
  align-items: center;
  margin-right: 0.9375rem;
}

/* 调整输入框和选择框宽度，使其紧凑排列 */
.el-input,
.el-select {
  width: 12.5rem;
}

.custom-form-item {
  height: 2.6875rem;
  width: 19.375rem;
  
  .el-form-item__label {
    width: 3.75rem;
    height: 2.6875rem;
  }
  
  .el-input {
    width: 14.6875rem !important;
    height: 2.6875rem !important;
    
    .el-input__inner {
      height: 2.6875rem !important;
      line-height: 2.6875rem !important;
      margin-left: 0.9375rem;
    }
  }
}

/* 全局调整（如果有其他表单项需要统一尺寸） */
.aligned-form {
  .el-form-item__label {
    height: 2rem;
    line-height: 2rem;

    &::before {
      vertical-align: middle; /* 红星与文字居中对齐 */
      margin-right: 0.25rem;
    }
  }

  .el-form-item__content {
    line-height: 2rem; /* 表单控件内容也保持一致的行高 */
  }

  // 对于单选按钮等特殊控件单独调整
  .el-radio-group {
    line-height: 2rem;
  }
}
  .loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}
  .empty-tip {
    padding: 1.25rem;
    text-align: center;
    color: #666;
  .el-icon {
    margin-bottom: 0.625rem;
    color: #999;
  }
}
/* 新增样式，确保红星对齐 */
.aligned-form {
  .el-form-item__label {
    // 确保所有标签有相同的高度
    height: 2rem;
    line-height: 2rem;
    // 确保红星与标签文本对齐
    &::before {
      vertical-align: middle;
      margin-right: 0.25rem;
    }
    .el-form-item {
      display: flex;
      align-items: center; /* 垂直居中 */
      margin-bottom: 1.125rem;  /* 可根据需要调整间距 */
    }
  }
  // 确保表单元素垂直居中
  .el-form-item__content {
    line-height: 2rem;
  }
  // 特殊处理单选按钮的对齐
  .el-radio-group {
    line-height: 2rem;
  }
}
.text-warning {
  color: #E13F1F;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-4 {
  margin-top: 1rem;
}
.storage-dialog {
  .storage-container {
    padding: 0 20px;
  }

  .storage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .selected-count {
      font-size: 16px;
      
      .count-number {
        color: #1890ff;
        font-weight: bold;
        margin: 0 5px;
      }
    }
  }

  .storage-content {
    .storage-progress {
      margin: 30px 0;
      text-align: center;
      
      .progress-text {
        margin-top: 10px;
        color: #666;
      }
    }

    .storage-result {
      margin-top: 20px;
      
      .result-summary {
        display: flex;
        gap: 40px;
        margin-bottom: 20px;
        
        .success-count {
          color: #67c23a;
          
          i {
            margin-right: 5px;
          }
        }
        
        .fail-count {
          color: #f56c6c;
          
          i {
            margin-right: 5px;
          }
        }
      }

      .fail-list {
        .fail-title {
          margin-bottom: 10px;
          color: #666;
          font-weight: bold;
        }
      }
    }
  }
}

/* 确保弹窗内的表格不会太高 */
.storage-dialog .el-table {
  margin-bottom: 20px;
  
  &::before {
    display: none;
  }
}

/* 调整进度条样式 */
.storage-progress {
  .el-progress-bar {
    margin-right: 0;
    margin-left: 0;
  }
  
  .el-progress__text {
    font-size: 16px;
  }
}

.audit-dialog {
  .audit-container {
    padding: 0 20px;
  }

  .audit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .selected-count {
      font-size: 16px;
      
      .count-number {
        color: #1890ff;
        font-weight: bold;
        margin: 0 5px;
      }
    }

    .audit-actions {
      .el-radio-button__inner {
        padding: 8px 20px;
      }
    }
  }

  .audit-content {
    .reject-reason {
      margin-top: 20px;
      
      .reason-header {
        margin-bottom: 10px;
        
        .reason-title {
          font-size: 14px;
          font-weight: 500;
          color: #1f2f3d;
        }
        
        .reason-required {
          color: #f56c6c;
          margin-left: 4px;
        }
      }
      
      .el-textarea {
        width: 100%;
        
        .el-textarea__inner {
          padding: 10px;
        }
      }
    }
  }
}

/* 调整表格内选择器的样式 */
.audit-dialog .el-table {
  .el-select {
    width: 100%;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .audit-dialog {
    .audit-header {
      flex-direction: column;
      gap: 15px;
      
      .audit-actions {
        width: 100%;
        
        .el-radio-group {
          width: 100%;
          display: flex;
          
          .el-radio-button {
            flex: 1;
            
            .el-radio-button__inner {
              width: 100%;
            }
          }
        }
      }
    }
  }
}

.delete-confirm-content {
  text-align: center;
  padding: 20px 0;

  .text-warning {
    color: #F56C6C;
    margin-top: 10px;
    font-weight: bold;
  }
}
</style>
